<template>
	<div class="memberDealDetails">
		<el-card shadow="hover">
			<div class="member-deal-details mb15">
				<el-form ref="formDataRef" :inline="true" :model="formData" label-width="70px" class="demo-form-inline">
					<el-row>
						<el-col :span="6">
							<el-form-item prop="keyWord" label="关键词:">
								<el-input
									style="width: 100%"
									maxlength="200"
									@keyup.enter="searchFun()"
									@blur="formData.keyWord = $utils.removeBilateralSpaces(formData.keyWord)"
									v-model="formData.keyWord"
									placeholder="名称、邮箱、手机号"
								/>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="levelTime" label="交易时间">
								<el-date-picker
									style="width: 100%"
									value-format="YYYY-MM-DD"
									v-model="formData.levelTime"
									type="date"
									placeholder="选择日期"
								></el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="project" label="项目">
								<el-select v-model="formData.project" style="width: 100%">
									<el-option v-for="(item, index) in extractProject" :key="index" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="moneyStatus" label="状态">
								<el-select v-model="formData.moneyStatus" style="width: 100%">
									<el-option v-for="(item, index) in extractMoneyStatus" :key="index" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item>
								<div style="padding-left: 10px">
									<el-button type="primary" @click="searchFun">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="userId" label="会员id" width="100"></el-table-column>
				<el-table-column prop="email" label="注册邮箱"></el-table-column>
				<el-table-column prop="money" label="收入/支出">
					<template #default="scope">
						<span>{{ scope.row.addSub === 1 ? '+ ' + scope.row.money : '- ' + scope.row.money }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="email" label="渠道/账号"></el-table-column>
				<el-table-column prop="member.levelTime" label="交易时间">
					<template #default="scope">
						<span>{{ $filters.timeFormat(scope.row.member.levelTime) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="moneyStatus" label="状态" width="100">
					<template #default="scope">
						<span>{{ getStateFormatZh(extractMoneyStatus, deepCopy(scope.row.moneyStatus)) }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="member.balance" label="余额" width="100"></el-table-column>
				<el-table-column prop="note" label="备注"></el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="ipage.current"
				background
				v-model:page-size="ipage.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="ipage.total"
			>
			</el-pagination>
		</el-card>
	</div>
</template>
<script setup name="MemberDealDetails">
import { useInit } from './hook';
import { getStateFormatZh } from '/@/utils/commonRequest';
import { deepCopy } from '/@/utils';
import { extractMoneyStatus, extractProject } from '/@/stores/dic';

const { ipage, handleGetMoneyList, tableData, formData, searchFun } = useInit();

const formDataRef = ref();

const resetForm = () => {
	formDataRef.value.resetFields();
};

// 分页改变
const onHandleSizeChange = (val) => {
	ipage.value.pageSize = val;
	handleGetMoneyList();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	ipage.value.current = val;
	handleGetMoneyList();
};

onMounted(() => {
	handleGetMoneyList();
});
</script>
<style lang="scss" scoped></style>
